/**
 * Tiem: 2023-1-17
 * FileName: Missions Setting(打车任务设置)
 * Editor: Haidong
*/

import React, { Component } from "react";
import { Input, Radio, Space, TimePicker, Form, InputNumber, Button } from "antd";
import { getTimeHm } from '@/utils/getDate';
import { apiGetTaskConfig, apiPutTaskConfig, apiPostTaskConfig } from "@/request/petTaxi";
import moment from "moment";
import "./style/index.less";

export default class MissionsSetting extends Component {
    constructor(props) {
        super();
        this.state = {
            deliveryTaskId: "",
            feeType: 3,
            scope: '',
            serviceStartTime: "",
            serviceEndTime: "",
            data: true,
            enableFreeToStore: 0,
            perKilometerPrice: "",
            startingKilometer: "",
            startingPrice: "",
        }
    }

    //Initialization
    componentDidMount() {
        this.getData()
    }

    //CTRL
    async getData() {
        let res = await apiGetTaskConfig()
        if (res.code === 0 && res.data) {
            let { scope, serviceStartTime, serviceEndTime, petTaxiMode } = this.state
            serviceStartTime = res.data.serviceStartTime
            serviceEndTime = res.data.serviceEndTime
            scope = res.data.scope
            petTaxiMode = res.data.petTaxiMode
            this.setState({
                deliveryTaskId: res.data.deliveryTaskId,
                scope,
                serviceStartTime,
                serviceEndTime,
                petTaxiMode,
            })
            let formData = {
                startingPrice:res.data.startingPrice,
                startingKilometer:res.data.startingKilometer,
                perKilometerPrice:res.data.perKilometerPrice
            }
            this.formRef.setFieldsValue(formData)
        } else {
            this.setState({
                data: false
            }, () => {
                this.putTaskConfig()
            })
        }
    }
    //配送费切换
    typeChange = (value) => {

    }
    //配送范围
    scopeChange = (v) => {
        this.setState({
            scope: v.target.value
        }, () => {
            this.putTaskConfig()
        })
    }
    //开始时间
    StartTimeChange = (value) => {
        let serviceStartTime = getTimeHm(value)
        if (serviceStartTime >= this.state.serviceEndTime) {
            React.$message({
                type: 'warning',
                content: '开始时间不可大于等于结束时间'
            })
        } else {
            this.setState({
                serviceStartTime,
            }, () => {
                this.putTaskConfig()
            })
        }
    }
    //结束时间
    EndTimeChange = (value) => {
        let serviceEndTime = getTimeHm(value)
        if (serviceEndTime <= this.state.serviceStartTime) {
            React.$message({
                type: 'warning',
                content: '结束时间不可小于等于开始时间'
            })
        } else {
            this.setState({
                serviceEndTime
            }, () => {
                this.putTaskConfig()
            })
        }
    }
    //修改设置
    putTaskConfig = async () => {
        let { deliveryTaskId, scope, serviceStartTime, serviceEndTime, startingPrice, startingKilometer, petTaxiMode, perKilometerPrice, data } = this.state
        if (data) {
            await apiPutTaskConfig({ deliveryTaskId, scope, serviceStartTime, serviceEndTime, startingPrice, startingKilometer, petTaxiMode, perKilometerPrice, }).then(res => {
                if (res.code === 0) {
                    React.$message({
                        type: 'success',
                        content: '配置成功'
                    })
                    this.getData()
                }
            }).catch(err => {
                React.$message({
                    type: "warning",
                    content: err.code
                })
            })
        } else {
            let scope = 0
            let serviceStartTime = "08:00"
            let serviceEndTime = "19:00"
            let startingPrice = 0
            let startingKilometer = 0
            let perKilometerPrice = 0
            let petTaxiMode = 3
            let feeType = 3
            await apiPostTaskConfig({ feeType, scope, serviceStartTime, serviceEndTime, startingPrice, startingKilometer, petTaxiMode, perKilometerPrice, }).then(res => {
                if (res.code === 0) {
                    React.$message({
                        type: 'success',
                        content: '配置成功'
                    })
                    this.getData()
                }
            }).catch(err => {
                React.$message({
                    type: "warning",
                    content: err.code
                })
            })
        }

    }
    petTaxiModeChange = (e) => {
        this.setState({
            petTaxiMode: e.target.value
        }, () => {
            this.putTaskConfig()
        })
    }
    onFinish = (value) => {
        this.setState({
            startingPrice: value.startingPrice,
            startingKilometer: value.startingKilometer,
            perKilometerPrice: value.perKilometerPrice
        }, () => {
            this.putTaskConfig()
        })
    }
    //VIEW
    render() {
        const { feeType, scope, serviceStartTime, serviceEndTime, petTaxiMode, } = this.state
        return (
            <div className="missionsPage">
                <div className="title">
                    配送设置
                </div>
                <div className="div">
                    <Space size={100}>
                        <span className="span">配送费</span>
                        <Radio.Group defaultValue={feeType} name='feeType' onChange={this.typeChange}>
                            {/* <Radio value={1}>免费</Radio>
                            <Space size={'large'}>
                                <Radio value={2} >
                                    统一会员价
                                    <div>
                                        会员价<Input />
                                    </div>
                                </Radio>
                            </Space> */}
                            <Space size={'large'}>
                                <Radio value={3}>
                                    按里程收费(仅支持输入整数)
                                    <Form layout={"vertical"} onFinish={this.onFinish} ref={(ref) => (this.formRef = ref)}>
                                        <Form.Item label="起步价" name="startingPrice" rules={[{ required: true }]} >
                                            <InputNumber min={0} precision={0} />
                                        </Form.Item>
                                        <Form.Item label="起步公里" name="startingKilometer" rules={[{ required: true }]} >
                                            <InputNumber min={0} precision={0} />
                                        </Form.Item>
                                        <Form.Item label="每公里" name="perKilometerPrice" rules={[{ required: true }]} >
                                            <InputNumber min={0} precision={0} />
                                        </Form.Item>
                                        <Form.Item style={{ display: "none" }} >
                                            <Button htmlType='submit' >保存</Button>
                                        </Form.Item>
                                    </Form>
                                </Radio>
                            </Space>
                        </Radio.Group>
                    </Space>
                </div >
                <div className="div">
                    <Space size={100}>
                        <span className="span">配送范围</span>
                        <Radio.Group value={1}>
                            <Space size={'large'}>
                                <Radio value={1}>
                                    门店周边
                                    <div>
                                        范围 <Input key={scope} defaultValue={scope}
                                            onPressEnter={this.scopeChange} style={{ width: '60%' }} />公里
                                    </div>
                                </Radio>
                            </Space>
                        </Radio.Group>
                    </Space>
                </div>
                <div className="div">
                    <Space size={100} >
                        <span className="span">配送时段</span>
                        <Radio.Group value={1}>
                            <Space direction='vertical' size={'large'}>
                                <Radio value={1}>
                                    每天时段
                                    <div style={{ width: 500 }}>
                                        开始时间 <TimePicker format={'HH:mm'} minuteStep={10}
                                            value={serviceStartTime ? moment(serviceStartTime, "HH:mm") : ''}
                                            allowClear={false}
                                            onChange={this.StartTimeChange}
                                            style={{ width: 150 }} />
                                        结束时间 <TimePicker style={{ width: 150 }} format={'HH:mm'} minuteStep={10}
                                            value={serviceEndTime ? moment(serviceEndTime, "HH:mm") : ''} allowClear={false} onChange={this.EndTimeChange} />
                                    </div>
                                </Radio>
                            </Space>
                        </Radio.Group>
                    </Space>
                </div>
                <div className="div">
                    <Space size={100} >
                        <span className="span">打车配置</span>
                        <Radio.Group value={petTaxiMode} name="petTaxiMode" onChange={(e) => this.petTaxiModeChange(e)}>
                            <Radio value={1} >
                                开启免费到店
                            </Radio>
                            <Radio value={2} >
                                开启付费打车
                            </Radio>
                            <Radio value={3} >
                                免费到店&付费打车
                            </Radio>
                        </Radio.Group>
                    </Space>
                </div>
            </div >
        )
    }

} 